<template>
  <view class="home_box">
    <view class="title_container">
      <view class="tab">
        <uni-segmented-control
          :current="current"
          :values="items.map((x) => x.title)"
          @clickItem="onClickItem"
          styleType="text"
          activeColor="#d21a74"
        ></uni-segmented-control>
      </view>
      <view class="search">
        <uni-icons
          custom-prefix="iconfont"
          type="iconsearch"
          color=""
          size="20"
        />
      </view>
    </view>
    <view class="tab_content">
      <view v-show="current === 0">
        <my-recommend></my-recommend>
      </view>
      <view v-show="current === 1">
        <my-category></my-category>
      </view>
      <view v-show="current === 2">
        <my-new></my-new>
      </view>
      <view v-show="current === 3">
        <my-album></my-album>
      </view>
    </view>
  </view>
</template>

<script>
import recommend from "@/components/home_user/recommend/index";
import category from "@/components/home_user/category/index";
import my_new from "@/components/home_user/new/index";
import album from "@/components/home_user/album/index";
export default {
  components: {
    "my-recommend": recommend,
    "my-category": category,
    "my-new": my_new,
    "my-album": album,
  },
  data() {
    return {
      items: [
        { title: "推荐" },
        { title: "分类" },
        { title: "最新" },
        { title: "专辑" },
      ],
      current: 3,
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
        uni.setNavigationBarTitle({
          title:
            this.items[this.current].title == "推荐"
              ? "首页"
              : this.items[this.current].title,
        });
      }
    },
  },
  async onLoad() {
    // this.request({
    //   url: "http://api-ugo-web.itheima.net/api/public/v1/home/swiperdata",
    // }).then(
    //   // 成功的回调函数形参，形参是一个函数
    //   (res) => {
    //     console.log(res);
    //   },
    //   // 失败的回调函数形参，形参是一个函数
    //   (err) => {
    //     console.log(err);
    //   }
    // );
    const { data: res } = await this.request({
      url: "http://api-ugo-web.itheima.net/api/public/v1/home/swiperdata",
    });
    console.log(res);
  },
};
</script>

<style lang="scss">
.home_box {
  .title_container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    position: relative;
    .tab {
      width: 70%;
    }
    .search {
      position: absolute;
      top: 50%;
      right: 5%;
      transform: translateY(-50%);
    }
  }
}
</style>
